<template>
	<div class="basic_wrap">
		<bsHeader title="" @backurl="$router.back()"></bsHeader>
		<div class="bind_wrap">
			<div class="bind_item">
				<p class="item_name">{{$t('auth.name')}}</p>
				<div class="block_div item_input">
					<van-field v-model="account.name" type="text" :placeholder="$t('auth.nameEmpty')" />
				</div>
			</div>
			<div class="bind_item">
				<p class="item_name">{{$t('auth.idcardNum')}}</p>
				<div class="block_div item_input">
					<van-field v-model="account.idcard" type="text" :placeholder="$t('auth.idcardEmpty')" />
				</div>
			</div>
			<div class="bind_item">
				<p class="item_name">{{$t('auth.img1')}}</p>
				<div class="block_div item_qrcode">
					<van-uploader v-model="fileList1" multiple :max-count="1" class="upload img_12"
						:max-size="2 * 1024 * 1024" @oversize="onOversize" :after-read="afterRead1"
						:before-read="beforeRead">
					</van-uploader>
				</div>
			</div>
			<div class="bind_item">
				<p class="item_name">{{$t('auth.img2')}}</p>
				<div class="block_div item_qrcode">
					<van-uploader v-model="fileList2" multiple :max-count="1" class="upload img_12"
						:max-size="2 * 1024 * 1024" @oversize="onOversize" :after-read="afterRead2"
						:before-read="beforeRead">
					</van-uploader>
				</div>
			</div>
			<div v-if="auth==0" class="basic_btn btn"
				:class="account.name==''||account.idcard==''||account.img1==''||account.img2==''?'no_touch':''"
				@click="submit()">
				{{$t('utils.submit')}}
			</div>
		</div>
	</div>
</template>

<script>
	import Vue from 'vue';
	import bsHeader from '../../components/bsHeader.vue'
	import Fetch from '../../utils/fetch'
	import {
		Field,
		CellGroup,
		Uploader,
		Toast
	} from "vant";

	Vue.use(Field).use(CellGroup).use(Uploader).use(Toast);
	import Api from "../../interface/index";
	import axios from 'axios'
	export default {
		name: "auth_idcard",
		components: {
			bsHeader
		},
		data() {
			return {
				data: [],
				auth: '1',
				account: {
					name: '',
					idcard: '',
					img1:'',
					img2:''
				},
				fileList1: [],
				fileList2: [],
			};
		},
		created() {
			this.$parent.footer('user', false);
		},
		mounted() {
			this.start();
		},
		methods: {
			start() {
				Fetch('/user/getAuthStatus').then(r => {
					this.auth = r.data.auth_idcard;
					if(this.auth!=0){
						this.account.idcard = r.data.idcard;
						this.account.name = r.data.name;
					}
				})
			},
			submit() {
				if (!this.account.name) {
					this.$toast(this.$t('auth.nameEmpty'));
					return false;
				}
				if (this.account.name.length > 50 || this.account.name.length < 2) {
					this.$toast(this.$t('auth.nameError'));
					return false;
				}
				if (!this.account.idcard) {
					this.$toast(this.$t('auth.idcardEmpty'));
					return false;
				}
				if (this.account.idcard.length > 20 || this.account.idcard.length < 6) {
					this.$toast(this.$t('auth.idcardError'));
					return false;
				}
				//纯数字
				var reg1 = /^[0-9a-zA-Z]*$/;
				if (!reg1.test(this.account.idcard)) {
					this.$toast(this.$t('auth.idcardError'));
					return false;
				}
				if (this.account.img1 == ''||this.account.img2 == '') {
					this.$toast(this.$t('auth.imgEmpty'));
					return false;
				}

				Fetch('/user/authIdcard', {
					...this.account,
				}).then(r => {
					this.$router.replace('/user');
				})

			},
			onOversize(file) {
				this.$toast(this.$t('wallet.qrcodeLong'));
			},
			beforeRead(file) {
				if (file.type !== 'image/jpeg' && file.type !== 'image/jpg' && file.type !== 'image/png') {
					this.$toast(this.$t('wallet.qrcodeError'));
					return false;
				}
				return true;
			},
			afterRead1(file) {
				let formData = new FormData();
				formData.append('language', this.$i18n.locale || "zh_cn");
				formData.append('file', file.file);
				formData.append('token', localStorage.getItem('token'));
				Toast.loading({
					forbidClick: true,
					duration: 20000
				});
				axios.post(Api.commonUrl + "/api/user/imgUpload", formData).then((r) => {
					Toast.clear();
					if (r.data.code === 1) {
						this.account.img1 = r.data.data;
					} else {
						this.$toast(this.$t(r.data.info));
					}
				});
			},
			afterRead2(file) {
				let formData = new FormData();
				formData.append('language', this.$i18n.locale || "zh_cn");
				formData.append('file', file.file);
				formData.append('token', localStorage.getItem('token'));
				Toast.loading({
					forbidClick: true,
					duration: 20000
				});
				axios.post(Api.commonUrl + "/api/user/imgUpload", formData).then((r) => {
					Toast.clear();
					if (r.data.code === 1) {
						this.account.img2 = r.data.data;
					} else {
						this.$toast(this.$t(r.data.info));
					}
				});
			}
		}
	};
</script>

<style lang="less" scoped>
	.bind_wrap {
		margin-top: 60px;

		.bind_item {
			padding: 20px 0 0 0;

			.item_name {
				color: #999;
				margin: 0 0 5px 5%;
			}

			.item_qrcode {
				height: 150px;
				text-align: center;

				.img_12 {
					height: 150px;
					padding: 10px;
				}
			}
		}

		.tips {
			line-height: 2;
			width: 92%;
			margin: 20px 0 0 4%;
			font-size: 14px;

			span {
				margin-right: 5px;
			}

			.tips1 {
				color: #FF0000;
			}
		}

		.btn {
			width: 80%;
			margin: 50px 0 0 10%;
		}
	}

	/deep/ .van-uploader__preview-image {
		width: 150px;
		height: 150px;
	}

	/deep/ .van-uploader__upload {
		background-color: unset;
		width: 150px;
		height: 150px;
	}
</style>
